<template>
  <uni-popup ref="popup" type="center">
    <view  class="self-popup">
      <view class="title" v-if="props.option.title">
        {{props.option.title}}
      </view>
      <view class="content" v-if="props.option.content">
        {{props.option.content}}
      </view>
      <view class="dialog-footer u-center">
        <view @click="close" class="btn-cancel" v-if="props.option.cancelbtnText">{{props.option.cancelbtnText || '取消'}}</view>
        <view @click="operate" class="btn-close">{{props.option.btnText || '我知道了'}}</view>
      </view>
    </view>
  </uni-popup>
</template>
<script setup>
import { ref } from 'vue'
const props = defineProps({
  option: {
    type: Object,
    default: () => {
      return {
        content: '',
        title: '提示',
        cancelbtnText: false,
        autoClose: false
      }
    }
  }
})
const emit = defineEmits(['onSubmit'])
// dlg 展示控制器
const popup = ref(null)
const receivable = ref(0)
const officialReceipts = ref(0)
const show = () => {
  popup.value.open()
}
const close = () => {
  popup.value.close()
  receivable.value = 0
  officialReceipts.value = 0
}
const operate = () => {
  if (!props.option.autoClose) {
    close()
  } else {
    // 传递给父组件
    emit('onSubmit')
  }
}
// 暴露给父组件
defineExpose({
  show
})
</script>
<style scoped lang="scss">
.self-popup{
  width: 518rpx;
  background: #FFFFFF;
  border-radius: 12rpx;
  padding: 30rpx;
  font-size: 30rpx;
  color: #333333;
  line-height: 42rpx;
  .title{
    font-size: 32rpx;
    color: #333333;
    line-height: 42rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 16rpx;
  }
  .content{
    margin-bottom: 36rpx;
    text-align: center;
  }
  .btn-close,.btn-cancel{
    width: 184rpx;
    height: 60rpx;
    background: #000000;
    border-radius: 34rpx;
    color: #ffffff;
    font-size: 30rpx;
    margin: 0 auto;
    text-align: center;
    line-height: 60rpx;
  }
  .btn-cancel{
    background-color: #F1F1F4;
    color: #999;
  }
}
</style>
